<template>
    <div>
        <el-form :model="form" :rules="rules" label-width="100px" ref="form1">
            <el-form-item prop="title" label="标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item prop="typeId" label="类型">
                <el-select v-model="form.typeId" clearable>
                    <el-option v-for="item in arry" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="content" label="内容">
                <!-- <el-input type="textarea" v-model="form.content"></el-input> -->
                <wenben v-model="form.content"></wenben>
                {{ form.content }}
            </el-form-item>
            <el-form-item prop="cover" label="封面">
                <!-- <el-input v-model="form.cover"></el-input> -->
                <el-upload class="avatar-uploader" :auto-upload='false' :show-file-list="false"
                    :before-upload="beforeAvatarUpload" :on-change="handleCoverChange" action="">
                    <img v-if="form.cover" :src="form.cover" class="avatar" name="img">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>


            </el-form-item>
            <el-form-item prop="publishDate" label="发布时间">
                <el-date-picker v-model="form.publishDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间" align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">保存</el-button>
                <el-button @click="close">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
import { gonggaozen } from '@/api/index'
import { tupushang } from '@/api/index';
import wenben from '../fuwenben/wenben.vue';
export default {
    components: {
        wenben
    },
    props: ["arry", "info"],
    data() {
        return {
            form: {
                id: null,
                title: "",
                typeId: "",
                content: "",
                cover: "",
                publishDate: "",
            },
            rules: {
                title: [{ required: true, trigger: 'blur', message: "请输入" }],
                typeId: [{ required: true, trigger: 'blur', message: "请选择" }],
                content: [{ required: true, trigger: 'blur', message: "请输入" }],
                cover: [{ required: true, trigger: 'blur', message: "请输入" }],
                publishDate: [{ required: true, trigger: 'blur', message: "请选择" }],
            }
        }
    },
    methods: {
        submit() {
            this.$refs["form1"].validate(flag => {
                console.log(1);

                if (flag) {
                    console.log(2);

                    console.log(this.form);
                    gonggaozen(this.form).then(res => {
                        console.log(3);

                        console.log(res);
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.$emit("done")
                    })
                }
            })
        },
        close() {
            this.$emit("done")
        },
        beforeAvatarUpload(file) {
            console.log(file.type, 345);

            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 1;
            console.log('jinru', 234);

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG\PNG 格式!');
                console.log('格式', 111);

            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 1MB!');
                console.log('大小', 222);

            }
            console.log('外面', 44);

            return isJPG && isLt2M;
        },
        handleCoverChange(file) {
            if(this.beforeAvatarUpload(file.raw)){

                const formData = new FormData();
                formData.append("img", file.raw);
                tupushang(formData).then(res => {
                    // console.log(res);
                    console.log('gggg', 33);
    
                    this.form.cover = res.data.img
                })
            }
        }
    },
    mounted() {
        if (this.info.id) {
            this.form = JSON.parse(JSON.stringify(this.info))
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>